<html>
<head>
	<meta charset='utf-8' />
	<title>日历</title>
	<style>
	a {
		text-decoration: none;
		font-size: 14px;
		color:rgb(102,102,102);
	}

		a:hover {
			text-decoration: underline;
			font-weight: bold;
		}
	
	body{
		background-image: url(bg.jpg);
		padding: 0px;
		margin: 0px;
	}

/*导航部分*/
	#nav {
		background-color: #fff;
		width:1000px;
		height:107px;
	}
	
		ul#nav_top {
			height: 46px;

		}

			ul#nav_top li {
				float:left;
				border-right: 1px dashed #f3f3f3;
				position: relative;
			}

			ul#nav_top li:hover {
				cursor: hand;
			}

				ul li.nav-bg-green:hover span {
					background-color: rgba(238,249,234,.5);
				}

				ul li.nav-bg-red:hover span {
					background-color: rgba(255,239,239,.5);
				}

				ul li.nav-bg-blue:hover span {
					background-color: rgba(227,241,251,.5);
				}

				ul#nav_top li:hover span a {
					text-decoration: underline;
				}

				ul li.large {
					width:210px;
				}

				ul li span[id] {
					display: block;
					width: 80px;
					height: 65px;
					text-align: center;
					background: url(uim.png) no-repeat top left;
					position: relative;
				}

				span#nav_channel {
					background-position: 25px 15px;
				}

				span#nav_calender {
					background-position: -124px 15px;
				}

				span#nav_price {
					background-position: -272px 12px;
				
				}

				span#nav_theme {
						background-position: -344px 12px;
				}

				ul li span a {
					position: absolute;
					top:45px;
					left:24px;
				}

				.info {
					font-size:12px;
					position: absolute;
					top:30px;
					left:60px;
					color:rgb(102,102,102);
				}

	em.item-cover {
		background-color: rgba(0,0,0,.3);
		display: none;
		width: 80px;
		height:65px;
		position: absolute;
		top:0;
		left:0;
	}


/*日历部分*/
	div#calender {
		width: 1000px;
		height: 45px;
		background-color: rgba(238,249,234,.5);
	}


	</style>
</head>
<body>
	<div id="nav">
		<ul id="nav_top">
			<li class="nav-item large"><h2>需求</h2><span class='info'>昨日：3,216</span></li>
			<li class="nav-item nav-bg-blue" onmouseout='stopCover(this);' onmouseover='converOtherItem(this);'><span id='nav_channel'><a href="#">频道</a></span><em class="item-cover"></em></li>
			<li class="nav-item nav-bg-green" onmouseout='stopCover(this);' onmouseover='converOtherItem(this);'><span id='nav_calender'><a href="#">日历</a></span><em class="item-cover"></em></li>
			<li class="nav-item nav-bg-red" onmouseout='stopCover(this);' onmouseover='converOtherItem(this);'><span id='nav_price'><a href="#">价格</a></span><em class="item-cover"></em></li>
			<li class="nav-item nav-bg-green" onmouseout='stopCover(this);' onmouseover='converOtherItem(this);'><span id='nav_theme'><a href="#">主题</a></span><em class="item-cover"></em></li>
		</ul>

		<div id="calender">
				


		</div>
	</div>
</body>
</html>
<script>
	function converOtherItem(elem) {
	    var a = [];
	    var b = elem.parentNode.children;
	    for(var i =1;i<b.length;i++) {
	        if(b[i] !== elem) 
	        {
	        	var c = b[i].getElementsByTagName('em')[0];
	        	c.style.display='block';
	        }
	    }    
	}

	function stopCover(elem) {
		var a = [];
		var b = elem.parentNode.children;
		for(var i =1;i<b.length;i++) {
			var c = b[i].getElementsByTagName('em')[0];
	        	c.style.display='none';

	    }    
	}



</script>